<template>
	<view class="shoplist">
		<view class="white_b customer-info r-5 tab_box">
			<view class="tab_div" @click="getPs(1)">
				<text :class="['tab_text',ps_type==1?'tab_check':'']">配送</text>
			</view>
			<view class="tab_div" @click="getPs(2)">
				<text :class="['tab_text',ps_type==2?'tab_check':'']">自提</text>
			</view>
		</view>
		<view class="white_b customer-info r-5" v-if="ps_type==1">
			<view class="align_center select-address" @click="modifyAddress()">
				<view class="">
					<image :src="imgRemote+'/assets/img/shoplistadd.png'"></image>
				</view>
				<view class="detail-address">

					<view class="" v-if="myAddress.id">
						<text v-if="myAddress.address">{{myAddress.address}}</text>
						<text v-if="myAddress.code">{{myAddress.code}}</text>
					</view>
					<view v-else>
						请先添加收货地址
					</view>
					<view class="fs-13" style="margin-top: 10rpx;" v-if="myAddress.id">
						<text v-if="myAddress.shou_name">{{myAddress.shou_name}}</text>
						<text v-if="myAddress.shou_phone" style="margin-left:20rpx;">{{myAddress.shou_phone}}</text>
					</view>
				</view>
				<view>
					<text class="iconfont iconfanhui t-180 gray_font"></text>
				</view>
			</view>
		</view>

		<view v-if="ps_type==2" class="map_box white_b r-5">
			<view class="name_boxs" @click="toPath">
				<view class="name_box">{{wz.default.name}}</view>
				<u-icon name="arrow-right" color="#6B7280" size="24"></u-icon>
			</view>

			<!-- <map style="width: 100%; height:210rpx;" :scale="15" :markers="wz.markers" @markertap="markertap" :latitude="wz.default.latitude"
				:longitude="wz.default.longitude" >
			</map>
			<view class="dw_box" @click="openMap">
				<image class="dw_img" src="@/static/img/dw.png" mode="widthFix"></image>
			</view> -->
			<view class="map_site">{{wz.default.site}}</view>
			<view class="map_lx">
				<view>营业时间: {{wz.default.start}}-{{wz.default.end}}</view>
				<view>电话:<span class="mp_mobile">{{wz.default.mobile}}</span></view>
			</view>
			<view class="map_qh" @click="userShow=true">
				<view>取货人</view>
				<view class="map_u_m">
					<view>{{user.nickname}}</view>
					<view class="map_m">{{user.mobile}}</view>
					<u-icon name="arrow-right" color="#DFDFDF"></u-icon>
				</view>
			</view>
		</view>

		<view class="shop white_b r-5 all-good">
			<view v-for="(item,index) in shop" :key="index">
				<view class="flex">
					<image class="have_img r-5" :src="imgRemote+item.goods.main_image" mode="aspectFit"></image>
					<view class="include_delete  flex_left_right flex-full">
						<view class="info">
							<view style="width:100%;">
								<view class="bold two-line">{{item.goods.name}}</view>
								<view style="margin-top: 20rpx;" class="flex_left_right">
									<text
										class="gray_font fs-11">￥{{item.sku.market_price}}/{{item.sku.unit}}（{{item.sku.guige}}）x{{item.buy_num}}</text>
									<text class="bold " style="margin-top:-8rpx;">
										￥{{$fixed(item.sku.market_price*item.buy_num)}}
									</text>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			<view class="flex_left_right" v-if="totalPrice" style="margin-top: 30rpx;">
				<text>商品金额</text>
				<text>￥{{totalPrice}}</text>
			</view>

			<view class="flex_left_right" v-if="freight" style="margin-top: 30rpx;">
				<text>配送费</text>
				<text>￥{{freight}}</text>
			</view>

			<view class="flex_left_right " style="margin-top: 30rpx;" @click="useQuan" v-if="isCoupon">
				<text>优惠券</text>
				<view>
					<text v-if="quanInfo.discount_money>0">￥{{quanInfo.discount_money}}</text>
					<text v-else style="color:gray;font-size:28rpx;">请选择优惠券</text>
					<text class="iconfont iconfanhui t-180 gray_font"></text>
				</view>

			</view>
			<!-- 	<view class="flex_left_right " style="margin-top: 30rpx;" v-else>
				<text>优惠券</text>
				<view>
				
					<text  style="color:gray;font-size:28rpx;">暂无优惠券可用</text>
					<text class="iconfont iconfanhui t-180 gray_font"></text>
				</view>

			</view> -->
			<view class="total-price">
				<text class="fs-11">合计：</text>
				<text class="red-font bold">￥{{setMoney}}</text>

			</view>
		</view>
		<view class="white_b padding-15 r-5 blank" style="margin:30rpx;">
			<view class="align_center order-remark">
				<text style="width:160rpx;">订单备注</text>
				<input v-model="remark" placeholder="选填" class="flex-full" />
			</view>

		</view>
		<view class="white_b pay-method ">
			<view class="way bold padding-15">支付方式</view>
			<radio-group class="radio-pay" @change="payWay">
				<view class="flex_left_right align_center">
					<view class="align_center">
						<text class="iconfont iconweixinzhifu" style="color:#09BB07;"> </text>
						<text class="bold fs-13">微信支付</text>
					</view>
					<radio value="wxpay" checked="true" style="transform:scale(0.7)" color="#FF7133" />
				</view>
				<view class="border-color">

				</view>
				
				<view class="flex_left_right remain-money">
					<view class="align_center">
						<text class="iconfont iconfeiyong" style="color:#FFB92C;"> </text>
						<text class="bold fs-13">余额支付</text>
						<text class="fs-11 gray_font"
							style="margin-left:4rpx;">(可用￥{{$fixed(addressInfo.money)}})</text>
					</view>
					<radio value="money" style="transform:scale(0.7)" color="#FF7133"
						:disabled="(hj-quanInfo.discount_money)>addressInfo.money?true:false" />
				</view>
				<view class="border-color">

				</view>
				<view class="flex_left_right remain-money" v-if="addressInfo.is_offer">
					<view class="align_center">
						<text class="iconfont iconxianxiazhifu"
							style="color:#FFB92C;font-size: 24rpx;margin:0 28rpx 0 8rpx;"> </text>
						<text class="bold fs-13">线下支付</text>

					</view>
					<radio value="offline" style="transform:scale(0.7)" color="#FF7133" />
				</view>

			</radio-group>
		</view>
		<view style="height:60px;">

		</view>
		<view class="fixed-bottom white_b width" :class="[system=='ios'?'pm':'']">
			<view class="align_center price-info">
				<view>
					<text class="qs" v-if="ps_type==1&&admin&&admin.qs>0">满{{admin.qs}}起送</text>
					<text class="fs-13">合计：</text>
					<text class="bold red-font">￥{{setMoney}}</text>
				</view>
				<view class="pay-button" @click="pay">支付</view>
			</view>

		</view>
		<passkeyborad :show="show" @complte="moneyPay" @close="show=false" :price="price"></passkeyborad>
		<u-modal v-model="userShow" ref="uModal" :async-close="true" :show-title='false' :show-cancel-button='true'
			@cancel="userShow=false" @confirm="confirm">
			<view class="slot-content">
				<view>取货人信息</view>
				<view class="input_box i_b">
					<view>姓名:</view>
					<input :focus="false" label-width="0" v-model="nickname" placeholder="请填写姓名" :border-bottom="false"
						type="text"></input>
				</view>
				<view class="input_box i_mobile">
					<view>电话:</view>
					<input :focus="false" label-width="0" v-model="mobile" placeholder="请填写电话" :border-bottom="false"
						type="number"></input>
				</view>
			</view>
		</u-modal>
		
		<u-popup v-model="psShow" mode="center" border-radius="14" :closeable="true" close-icon-pos="top-right">
			<view class="b_msg_box">
				<view class="b_msg_title">温馨提示</view>
				<view class="b_msg_msg">{{psMsg}}</view>
				<view class="b_msg_btn" @click="psShow=false">确定</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import gppDatePicker from "@/components/gpp-datePicker/gpp-datePicker.vue"
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	const app = getApp().globalData;
	const {
		imgRemote,
	} = app;
	export default {
		components: {
			gppDatePicker,
			passkeyborad
		},
	    computed:{
			setMoney:function(){
				let num= this.$fixed(this.hj-this.quanInfo.discount_money);
				if(num<0) num=0.01;
				return num;
			}
		},
		data() {
			return {

				visible: false,
				addressInfo: {
					is_offer: 0
				},
				myAddress: {
					id: ''
				},
				imgRemote: imgRemote,
				shop: [],
				totalPrice: '',
				visible: false,
				freight: '',
				fw: '',
				jrs: '',
				hj: '',
				showSwitch: false,
				pay_type: 'wxpay',
				remark: '',
				receiving: '',
				show: false,
				showPay: 0,
				pay_password: '',
				price: '',
				quanInfo: {
					discount_money: 0,
					record_id: ''
				},
				hasAddress: false,
				isUseQuan: false,
				system: '',
				ps_type: 1,
				type: 1,
				wz: [],
				user: {
					nickname: '',
					mobile: ''
				},
				nickname: '',
				mobile: '',
				userShow: false,
				psStatus:false,
				psShow: false,
				psMsg: '',
				admin:'',
				isQs:false,
				isCoupon:false,
				qid:''
			}
		},
		onShow() {

            let is=1;
			let qid='';
			
			this.system = uni.getSystemInfoSync().platform;
			if (uni.getStorageSync('address')) {
				let useAddress = JSON.parse(uni.getStorageSync('address'));
				this.myAddress = useAddress;
				is=2;
			}

			this.isSetPwd();

            

			this.system = uni.getSystemInfoSync().platform;
			if (uni.getStorageSync('quanInfo')) {
				is=2;
				this.qid=uni.getStorageSync('quanInfo');
			} 
 
            if(is==2){
			   this.set();
			}
 
           //this.getShopPs();

		},
		onLoad(e) {

			if (e.type) {
				this.type = e.type;
			}

			this.getUserInfo();
			
			this.system = uni.getSystemInfoSync().platform;
			if (uni.getStorageSync('address')) {
				let useAddress = JSON.parse(uni.getStorageSync('address'));
				this.myAddress = useAddress;
				this.set();
			} else {
				this.defaultAddress();
			}
			
			
			

		},
		methods: {
			
			getShopPs(lng='',lat='') {
				let _ = this;
				if(lng&&lat){
					_.$get(_.$api.shopPs, {
						lng: lng,
						lat: lat
					}, ress => {
						console.log(ress);
						_.psShow = ress.data.data.status;
						_.psStatus=ress.data.data.status;
						_.psMsg = ress.data.data.msg;
					})
					return;
				}
				
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						_.$get(_.$api.shopPs, {
							lng: res.longitude,
							lat: res.latitude
						}, ress => {
							_.psShow = ress.data.data.status;
							_.psMsg = ress.data.data.msg;
						})

					},
					fail(error) {
						_.$get(_.$api.shopPs, {
							lng: '',
							lat: ''
						}, ress => {
							_.psShow = ress.data.data.status;
							_.psMsg = ress.data.data.msg;
						})
						console.log(error);
					}
				})
			},
			getla() {
				let _ = this;
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						_.$get(_.$api.shopList, {
							lng: res.longitude,
							lat: res.latitude
						}, ress => {
							_.wz = ress.data.data;
						})

					},
					fail(error) {
						_.$get(_.$api.shopList, {
							lng: '',
							lat: ''
						}, ress => {
							_.wz = ress.data.data;
						})
						console.log(error);
					}
				})
			},
			getPs(type) {

				if (type != this.pay_type) {
					this.ps_type = type;
					this.set();
				}

				if (type == 2) {
					this.getla();
				}
			},
			payWay(e) {
				this.pay_type = e.detail.value;
			},
			toPath() {
				uni.navigateTo({
					url: '/pages/shopcart/shop'
				})
			},
			modifyAddress() {
				uni.navigateTo({
					url: '/pages/addressMange/index?type=2'
				})
			},
			getLuck() {
				let params = {
					page: 1,
					limit: 20,
					type: 1
				};
				this.$get(this.$api.cMy, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						let time = new Date() - 0;

						data.data.data.map((item) => {
							if (item.info.use_timedata == 2) {
								if (new Date(item.info.use_time_info.start_time) - 0 <= time && new Date(
										item.info.use_time_info.end_time) - 0 >= time && this.hj -
									item.info.satisfy_money >= 0
								) {
									item.use = true;
								} else {
									item.use = false;
								}
							} else {
								if (item.be_time * 1000 >= time && this.hj - item.info
									.satisfy_money >= 0
								) {
									item.use = true;
								} else {
									item.use = false;
								}
							}

							return item
						})
						let items = {};
						this.isUseQuan = data.data.data.some((item) => {
							if (item.use == true) {
								//if (!uni.getStorageSync('quanInfo')) {
								this.quanInfo = item;
								this.quanInfo.record_id = item.id;
								this.quanInfo.discount_money = item.info.discount_money
								//}
								return item.use == true
							}

						});

					}
				})
			},

			useQuan() {
				uni.navigateTo({
					url: '/pages/coupons/useCoupons?totalPrice=' + this.totalPrice
				})
			},

			confirmPay() {
				let _ = this;

				let newId;
				if (_.type == 1) {
					let ids = '';
					for (let i of _.shop) {

						ids += i.id + ','

					}
					newId = ids.substring(0, ids.length - 1);
				} else {
					newId = uni.getStorageSync('selectGoods');
				}

				uni.login({
					provider: 'weixin',
					success(res) {
						let params = {
							token: uni.getStorageSync('userToken'),
							cart_ids: newId,
							address_id: _.myAddress.id,
							pay_type: _.pay_type,
							remark: _.remark,
							code: res.code,
							record_id: _.quanInfo.record_id,
							ps_type: _.ps_type
						};
						if (_.pay_type == 'money') {
							params.pay_password = _.pay_password;
						}

						if (_.ps_type == 2) {
							params.province = '';
							params.city = '';
							params.area = '';
							params.address = '';
							params.shou_name = _.user.nickname;
							params.shou_phone = _.user.mobile;
							params.freight = 0;
							params.shop_id = _.wz.default.shop_id
						}

						_.$post(_.$api.orderAdd_order, params, (res1) => {
							let data = res1.data;
							if (data.code == 1) {
								uni.setStorageSync('quanInfo', '');
								if (_.pay_type != 'wxpay') {
									_.$Toast('提交订单成功');
									setTimeout(() => {
										uni.reLaunch({
											url: './paySuccess',
											success() {
												getApp().globalData.isReload = true;
											}
										})
									}, 1000)
								} else {
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: data.data.timeStamp,
										nonceStr: data.data.nonceStr,
										package: data.data.package,
										signType: data.data.signType,
										paySign: data.data.paySign,
										success: function(res) {
											_.$Toast('支付成功');
											setTimeout(() => {
												uni.reLaunch({
													url: './paySuccess',
													success() {
														getApp().globalData
															.isReload = true;
													}
												})
											}, 500)

										},
										fail: function(err) {
											console.log(err);
											_.$Toast('支付取消');
											setTimeout(() => {
												uni.reLaunch({
													url: './paySuccess',
													success() {
														getApp().globalData
															.isReload = true;
													}
												})
											}, 500)
										}
									});
								}

							} else {

								if (_.pay_type == 'money' && data.msg == "支付密码错误") {
									uni.showModal({
										title: '',
										content: '支付密码错误,请重试',
										cancelText: '忘记密码',
										confirmColor: '#FF7133',
										success(res) {
											if (res.confirm) {
												_.show = true;
											} else if (res.cancel) {
												uni.navigateTo({
													url: '/pages/user/forgetPay'
												})
											}
										}
									})
								} else {
									_.$Toast(data.msg);
								}
							}
						});
					}
				})

			},

			pay() {
				
				console.log(this.admin);
				if(this.isQs){
					return this.$Toast('满'+this.admin.qs+'起送');
				}
				
				if (!this.myAddress.id && this.ps_type == 1) {
					return this.$Toast('请先选择收货地址');
				}
				
				if(this.ps_type==1&&this.psStatus){
					this.psShow=true;
					return;
				}
				
				if (this.pay_type == 'wxpay') {
					this.confirmPay();
				} else if (this.pay_type == 'money') {
					if (this.showPay == 1) {
						this.show = true;

						this.price = this.hj - this.quanInfo.discount_money

					} else {
						this.$showModal('是否设置支付密码', (res) => {
							uni.navigateTo({
								url: '/pages/user/setPay'
							})
						})
					}
				} else {
					this.confirmPay();
				}

			},
			isSetPwd() {
				let that = this;
				that.$get(that.$api.userIsset_pay_password, {
					token: uni.getStorageSync('userInfo').token
				}, (res) => {
					this.showPay = res.data.code;
				})
			},
			moneyPay(e) {
				this.pay_password = e;
				this.confirmPay();
			},
			switchChange(e) {
				this.showSwitch = e.target.value;
			},
			set() {
				this.$post(this.$api.setOrder, {
					ids: uni.getStorageSync('selectGoods'),
					token: uni.getStorageSync('userToken'),
					ps_type: this.ps_type,
					address_id: this.myAddress.id,
					record_id:this.qid
				}, res => {
					let data = res.data;
					if (data.code == 1) {
						this.shop = data.data.shop;
						this.jrs = data.data.jrs;
						this.totalPrice = data.data.total;
						this.fw = data.data.fw;
						this.freight = data.data.freight;
						this.hj = data.data.hj;
						this.admin=data.data.admin;
						this.isQs=data.data.isQs;
						this.quanInfo=data.data.record;
						this.isCoupon=data.data.isCoupon;
					}
				});
			},
			getUserInfo() {
				let params = {
					token: uni.getStorageSync('userToken')
				}
				this.$get(this.$api.userInfo, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.addressInfo = data.data;
						this.user = data.data;
						this.nickname = data.data.nickname;
						this.mobile = data.data.mobile;
					}
				})
			},
			
			defaultAddress() {
				let params = {
					token: uni.getStorageSync('userToken'),
					limit: 1000
				}
				this.$get(this.$api.aMy, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						let info = data.data.data.filter((item) => {
							return item.is_check == 2;
						})
						this.hasAddress = info.length;
						this.myAddress = info[0];
						
						if (this.hasAddress == 0) {
							this.myAddress = {}
						}
						
						if(info[0]){
							this.getShopPs(info[0].long,info[0].lat);
						}
			
			            this.set();
					}
				})
			},
			/* defaultAddress() {

				let params = {
					token: uni.getStorageSync('userToken'),
					status: 2
				};
				this.$get(this.$api.aduitInfo, params, res => {
					let data = res.data;
					if (data.code == 1) {
						this.myAddress = data.data;
					}
				});
			} */
		},

		onHide() {
			uni.removeStorageSync('address');
		}

	}
</script>

<style scoped lang="scss">
	.pm {
		padding-bottom: 45rpx;
	}

	input {
		margin-top: 3rpx;
	}

	.blank input {
		display: block;
	}

	.customer-info {
		image {
			width: 50rpx;
			height: 58rpx;
		}

		.select-address {
			border-bottom: 2px dashed #eee;
			padding-bottom: 30rpx;
		}

		margin:30rpx;
		padding: 30rpx;
	}

	.detail-address {
		width: 550rpx;
		padding: 0 0rpx 0 20rpx;
	}

	.all-good {
		padding: 0 30rpx;
		margin: 0 30rpx;
	}

	.single_good {
		padding-top: 30rpx;

		.good_img {
			width: 180rpx;
			height: 120rpx;
			margin-right: 30rpx;


		}
	}

	.have_img {
		width: 200rpx;
		height: 200rpx;
		margin: 30rpx 30rpx 0 0;
	}

	.total-price {
		border-top: 1px solid #eee;
		margin-top: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: right;
	}

	.order-remark {
		height: 83rpx;


	}

	.pay-method {
		border-radius: 10rpx;
		padding-bottom: 20rpx;

		.radio-pay {
			padding: 0 16rpx 0 20rpx;
		}

		margin:0 30rpx;

		.way {
			height: 82rpx;
			line-height: 82rpx;
		}

		.iconfont {
			margin-right: 19rpx;
			font-size: 40rpx;
		}

		.border-color {
			border-top: 1px solid #EEE;
			margin: 20rpx 12rpx 20rpx 8rpx;
		}


	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		z-index: 99;

		.price-info {
			justify-content: flex-end;
			height: 49px;


			.pay-button {
				background: #e34b0f;
				color: white;
				margin: 0 30rpx;
			}
		}
	}

	.tab_box {
		display: flex;
		align-items: center;
	}

	.tab_div {
		flex: 1;
		text-align: center;
	}

	.tab_text {
		box-sizing: border-box;
		padding: 0 0 20rpx 0;
	}

	.tab_check {
		color: #FF7133;
		border-bottom: 5rpx solid #FF7133;
	}

	.map_box {
		margin: 30rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 0 20rpx;
		position: relative;
	}

	.name_box {
		box-sizing: border-box;
		padding: 15rpx 0;
		font-size: 30rpx;
		margin-right: 15rpx;
	}

	.name_boxs {
		display: flex;
		align-items: center;
	}

	.map_site {
		margin: 0 0 16rpx 0;
		font-size: 26rpx;
		color: #9CA3B7;
	}

	.map_lx {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #EEEEEE;
		box-sizing: border-box;
		padding: 0 0 20rpx 0;
	}

	.mp_mobile {
		color: #2160DB;
	}

	.map_qh {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx 0 20rpx 0;
		font-size: 26rpx;

	}

	.map_u_m {
		display: flex;
		align-items: center;
	}

	.map_m {
		margin: 0 20rpx;
	}

	.dw_box {
		background-color: white;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 185rpx;
		left: 40rpx;
		border-radius: 15rpx;
	}

	.dw_img {
		width: 40rpx;
	}

	.slot-content {
		box-sizing: border-box;
		padding: 30rpx;
	}

	.input_box {
		display: flex;
		align-items: center;
	}

	.i_b {
		border-bottom: 1rpx solid #eee;
		box-sizing: border-box;
		padding: 30rpx 0 30rpx 20rpx;
	}

	.i_mobile {
		box-sizing: border-box;
		padding: 30rpx 0 0 20rpx;
	}

	::v-deep .u-field {
		width: 400rpx;
		height: 80rpx;
	}
	.qs{
		margin-right: 20rpx;
		color: #FF7133;
		font-size: 26rpx;
	}
</style>